<template>
  <div
    title="网页链接"
    class="tlbr-btn"
    :class="{ active: isLink }"
    @click="handleClick"
  >
    <div class="tlbr-btn__icon">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5714 9.64391C11.7211 9.33676 12.0914 9.20912 12.3986 9.35882C12.896 9.54033 13.3663 9.83201 13.7673 10.233C15.4758 11.9416 15.4758 14.7116 13.7673 16.4202L11.7049 18.4826C9.99638 20.1911 7.22628 20.1911 5.51774 18.4826C3.80919 16.7741 3.80919 14.0039 5.51774 12.2954L7.00879 10.8043C7.25287 10.5603 7.6486 10.5603 7.89268 10.8043C8.13676 11.0484 8.13676 11.4441 7.89268 11.6882L6.40162 13.1793C5.18123 14.3997 5.18123 16.3783 6.40162 17.5987C7.622 18.8191 9.60065 18.8191 10.821 17.5987L12.8834 15.5363C14.1038 14.3159 14.1038 12.3373 12.8834 11.1169C12.5825 10.8159 12.2294 10.6009 11.8565 10.4711C11.5493 10.3214 11.4217 9.95106 11.5714 9.64391Z"
          fill="currentColor"
        ></path>
        <path
          d="M17.5975 6.4026C16.3772 5.18221 14.3985 5.18221 13.1781 6.4026L11.1157 8.46499C9.89535 9.68538 9.89535 11.664 11.1157 12.8844C11.3977 13.1663 11.7259 13.3715 12.0731 13.5009C12.3766 13.658 12.4953 14.0314 12.3382 14.3348C12.1811 14.6383 11.8077 14.757 11.5043 14.6C11.0424 14.4203 10.6064 14.1428 10.2318 13.7683C8.5233 12.0598 8.5233 9.28965 10.2318 7.58111L12.2942 5.51872C14.0028 3.81017 16.7729 3.81017 18.4814 5.51872C20.19 7.22726 20.19 9.99736 18.4814 11.7059L17.0549 13.1324C16.8109 13.3765 16.4152 13.3765 16.171 13.1324C15.927 12.8883 15.927 12.4926 16.171 12.2485L17.5975 10.822C18.8179 9.60163 18.8179 7.62298 17.5975 6.4026Z"
          fill="currentColor"
        ></path>
      </svg>
    </div>
    <Teleport to="#app">
      <div class="bre-modal brea-link-modal" v-if="modalDisplay">
        <div class="bre-modal__wrap" style="width: 500px; top: 30%">
          <div class="bre-modal__header">
            <p>添加站内链接</p>
            <div class="bre-modal__close">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M4.92768 4.93029C5.22057 4.6374 5.69544 4.6374 5.98834 4.93029L11.9986 10.9405L18.0104 4.92865C18.3033 4.63576 18.7782 4.63576 19.0711 4.92865C19.364 5.22155 19.364 5.69642 19.0711 5.98931L13.0592 12.0012L19.0698 18.0118C19.3627 18.3047 19.3627 18.7795 19.0698 19.0724C18.7769 19.3653 18.302 19.3653 18.0092 19.0724L11.9986 13.0618L5.98963 19.0708C5.69674 19.3637 5.22187 19.3637 4.92897 19.0708C4.63608 18.7779 4.63608 18.303 4.92897 18.0101L10.9379 12.0012L4.92768 5.99095C4.63478 5.69806 4.63478 5.22319 4.92768 4.93029Z"
                  fill="currentColor"
                ></path>
              </svg>
            </div>
          </div>
          <div class="bre-modal__content">
            <div class="bre-link-modal__form">
              <div class="bre-input medium">
                <input
                  type="text"
                  placeholder="请输入站内链接"
                  class="bre-input__inner"
                  v-model="form.link"
                />
              </div>
              <div class="bre-input medium" style="margin-top: 15px">
                <input
                  type="text"
                  placeholder="请输入链接文字"
                  class="bre-input__inner"
                  v-model="form.title"
                />
              </div>
              <div class="bre-link-modal__form__btns">
                <button
                  class="bre-btn primary size--small bre-link-modal__btn"
                  @click="handleEnter"
                >
                  确认
                </button>
                <button
                  class="bre-btn grey size--small bre-link-modal__btn"
                  @click="handleCancel"
                >
                  取消
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, inject, shallowRef } from 'vue'
import Quill from 'quill'
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())
const formatMap = inject('formatMap', ref<Record<string, any>>({}))
const getSelectionFormat = inject('getSelectionFormat', () => {})
const form = ref({
  link: '',
  title: '',
})
const isLink = computed(() => {
  return formatMap.value.link
})
let startIndex = 0
let deleteLength = 0
const modalDisplay = ref(false)
const handleClick = () => {
  startIndex = 0
  deleteLength = 0
  QuillEditor.value!.focus()
  const selection = QuillEditor.value!.getSelection()!
  let _selectionIndex = 0
  if (isLink.value) {
    const [_blot, _index] = QuillEditor.value!.getLeaf(selection.index)
    _selectionIndex = _index
    if (_blot) {
      const _title: string = _blot.text
      const _link: string = formatMap.value.link
      form.value.link = _link
      form.value.title = _title
      deleteLength = _title.length
    }
  }
  startIndex = selection.index - _selectionIndex
  openModal()
}
const preventScroll = (event: Event) => {
  event.preventDefault()
}
const openModal = () => {
  modalDisplay.value = true
  window.addEventListener('wheel', preventScroll)
  window.addEventListener('touchmove', preventScroll)
}
const closeModal = () => {
  modalDisplay.value = false
  window.removeEventListener('wheel', preventScroll)
  window.removeEventListener('touchmove', preventScroll)
}
const handleEnter = () => {
  //   console.log('enter')
  // 检查链接是否合法
  // 检查标题是否合法
  if (!form.value.link?.trim()) {
    console.log('请输入站内地址')
    return
  }
  // 检查链接是否合法
  if (!form.value.link.startsWith('https://')) {
    console.log('请输入正确的站内地址')
    return
  }
  QuillEditor.value?.deleteText(startIndex, deleteLength)
  QuillEditor.value?.insertText(startIndex, form.value.title, {
    link: form.value.link,
  })
  closeModal()
}
const handleCancel = () => {
  console.log('cancel')
  closeModal()
  form.value.link = ''
  form.value.title = ''
}
</script>
<style lang="scss" scoped></style>
